<template>
	<view>
		<view class="audit">
			<view class="audit-title">审核</view>
			<view class="audit-form">
				<view class="audit-row">
					<span class="audit-row-name">审核状态：</span>
					<view class="audit-row-fild" @click="selectAudit">
						<view class="audit-inner">
							<span class="audit-tip" v-if="!postData.auditId">请选择</span>
							<span class="audit-red" v-if="postData.auditId">{{postData.auditName}}</span>
							<u-icon name="play-right-fill" color="#111111" size="9" v-if="!isRight"></u-icon>
							<u-icon name="arrow-down-fill" color="#111111" size="9" v-if="isRight"></u-icon>
						</view>
					</view>
					<view class="audit-list" v-if="isRight">
						<view class="audit-list-item" v-for="item in auditList" @click="auditSelect(item)">{{item.name}}
						</view>
					</view>
				</view>
				
				<view class="audit-row audit-row2" v-if="postData.auditId==2">
					<span class="audit-row-name audit-row-name2">驳回原因：</span>
					<view class="audit-row-fild audit-row-fild2">
						<u--textarea v-model="postData.note" placeholder="请输入驳回原因" :height="40"
							placeholderStyle="color: #999999;font-weight: 400;font-size: 28rpx;"></u--textarea>
					</view>
				</view>
			</view>
			<view class="btn" @click="comPop">确定</view>
		</view>
		<view class="btn-close" @click="closePop">
			<u-icon name="close" color="#fff" size="18"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				auditList: [{
					name: '通过',
					id: 1
				}, {
					name: '不通过',
					id: 2
				}],
				postData: {
					auditName: '',
					auditId: '',
					note:''
				},
				isRight: false,

			}
		},
		
		methods: {
			selectAudit() {
				this.isRight = !this.isRight
			},
			auditSelect(item) {
				this.postData.auditName = item.name
				this.postData.auditId = item.id
				this.isRight = !this.isRight
			},
			closePop(){
				this.$emit('close',this.postData)
			},
			comPop(){
				this.$emit('comPop',this.postData)
			},

		},

	}
</script>



<style lang="scss" scoped>


	.audit {
		width: 526upx;
		height: 738upx;
		background: url("") no-repeat;
		background-size: 100% 100%;
		margin: 300upx auto 0 auto;
		position: relative;
		.audit-list {
			position: absolute;
			bottom: 195upx;
			right: 32upx;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
			box-sizing: border-box;
			z-index: 9;
		}
		
		.audit-list-item {
			width: 182rpx;
			height: 60rpx;
			line-height: 60upx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #71B7FF;
			background-color: #fff;
			z-index: 99999999;
		}

		.audit-title {
			padding-top: 256upx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #111111;
			text-align: center;
			margin-bottom: 44upx;
		}

		.audit-form {

			.audit-row {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 24upx;
				z-index: 2;
			}

		

			.audit-inner {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20upx;
				width: calc(100% - 40upx);
				height: 100%;

				.audit-tip {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}

				.audit-red {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #F01022;
				}
			}

			.audit-row-name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #111111;
				width: 140rpx;
			}

			.audit-row-fild {
				width: 316rpx;
				height: 74rpx;
				background: #F9F9F9;
				border-radius: 12rpx;

			}

			.audit-row2 {
				align-items: flex-start;
				margin-bottom: 30upx;
			}

			.audit-row-name2 {
				padding-top: 20upx;
			}

			.audit-row-fild2 {
				height: 112rpx;
			}

			::v-deep .u-textarea {
				background-color: transparent;
			}

			::v-deep .u-border {
				border: none;
			}


		}

		.btn {
			position: absolute;
			bottom: 60upx;
			width: 456rpx;
			height: 80rpx;
			left: 50%;
			transform: translateX(-50%);
			background: linear-gradient(90deg, #12C66B 0%, #11AA66 100%);
			border-radius: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 80upx;
			text-align: center;
			margin: auto;
		}
	}

	.btn-close {
		width: 74rpx;
		height: 74rpx;
		border-radius: 50%;
		border: solid 1upx #939393;
		background-color: RGBA(118, 118, 118, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 38upx auto 0 auto;
	}

</style>